<script setup>
import { ref } from 'vue'
import { CirclePlus } from '@element-plus/icons-vue'
import { getProductOrderService } from '@/api/order'
let totalPrice = ref(0)
let totalOrder = ref(0)
let test = ref('kdjak')
const getOrder = async () => {
  const res = await getProductOrderService()
  console.log('收益为',res);
  totalPrice.value = res.data.data.reduce((acc,price) => acc+price.totalPrice,0)
  console.log('总收益为',res.data.data);
  console.log ('测试数据',totalPrice.value);
  totalOrder.value = res.data.data.length
  console.log('订单数',totalOrder.value);
}
getOrder()


</script>

<template>
  <div>
    <h1 class="title">我的收益</h1>
    <el-card style="width: 250px" class="header" shadow="hover">
    <template #header>
      <div class="card-header">
        <span><strong>新增净收入</strong></span>
      </div>
    </template>
    <span class="main">{{ totalPrice }}￥</span>
  </el-card>
  <el-card style="width: 250px" class="header2" shadow="hover">
    <template #header>
      <div class="card-header2">
        <span><strong>订单总数</strong></span>
      </div>
    </template>
    <span class="main2">{{ totalOrder }}</span>
  </el-card>
  </div>
  <div>
    <el-card style="width: 250px" class="header" shadow="hover">
    <template #header>
      <div class="card-header">
        <span><strong>客单价</strong></span>
      </div>
    </template>
    <span class="main">288.00￥</span>
  </el-card>
  <el-card style="width: 250px" class="header2" shadow="hover">
    <template #header>
      <div class="card-header2">
        <span><strong>商品浏览量</strong></span>
      </div>
    </template>
    <span class="main2">556K</span>
  </el-card>
  </div>
</template>
<style lang="scss" scoped>
.title {
    color: #27ba9b;
    font-size: 20px;
    font-family: "楷体","楷体_GB2312";
  }
.header {
  margin-left: 400px;
  margin-top: 50px;
  border-radius: 10px;
  float: left;
  .card-header {
  font-size: 20px;
 
  }
  .main {
    color: #27bd9b;
    font-size: 35px;
  }
}
.header2 {
  margin-top: 50px;
  margin-left: 120px;
  border-radius: 10px;
  float: left;
  .card-header2 {
  font-size: 20px;
  }
  .main2 {
    color: #27bd9b;
    font-size: 35px;
  }
}


</style>